<!--{template common/header_simple_start}-->
<link href="static/css/common.css?{VERHASH}" rel="stylesheet" media="all">
<script type="text/javascript" src="static/js/jquery.leftDrager.js?{VERHASH}"></script>
<style>
html, body {
	overflow: hidden;
	background: #FBFBFB;
}
.bs-left-container {
	width: 120px;
}
.bs-main-container {
	margin-left: 120px;
	overflow: auto;
}
</style>
<!--{template common/header_simple_end}-->
<div class="bs-container clearfix">
<div class="bs-left-container  clearfix"> 
  <!--{template left}--> 
</div>
<div class="left-drager">
  <div class="left-drager-op">
    <div class="left-drager-sub"></div>
  </div>
</div>
<div class="bs-main-container  clearfix">
  <div class="main-header clearfix">
    <ul class="nav nav-pills nav-pills-bottomguide">
      <li ><a href="{BASESCRIPT}?mod=cloud&op=edit&bz=dzz"> 设置</a></li>
      <li ><a href="{BASESCRIPT}?mod=cloud&op=space">空间管理</a></li>
      <li class="active"><a href="{BASESCRIPT}?mod=cloud&op=oauth&bz=ALIOSS">添加阿里云存储</a></li>
    </ul>
  </div>
  <div class="main-content clearfix" style="border-top:1px solid #FFF">
    <div style="padding:15px;">
      <h4 style="margin-bottom:20px">设置cess Key ID 和 Access Key Secret</h4>
      <form  name="aliform" class="form-horizontal" action="{BASESCRIPT}?mod=cloud&op=oauth" method="post" onsubmit="return validate(this)">
        <input type="hidden" name="alisubmit" value="true" />
        <input type="hidden" name="bz" value="ALIOSS" />
        <input type="hidden" name="formhash" value="{FORMHASH}" />
        <div class="form-group">
          <label class="control-label col-sm-3" for="access_id">Access Key ID</label>
          <div class="col-sm-5">
            <input type="text" id="access_id" class="form-control"  name="access_id" autocomplete="off" value="$ali[access_id]" onblur="if(this.value==''){jQuery(this).parent().parent().addClass('has-warning');}else{jQuery(this).parent().parent().removeClass('has-warning');getBucket();}">
          </div>
          <div class="col-sm-4"> <span  class="help-block">阿里云云存储Access Key ID</span> </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-3" for="access_key">Access Key Secret</label>
          <div class="col-sm-5">
            <input type="password" class="form-control" id="access_key" name="access_key" autocomplete="off" value="$ali[access_id]" onblur="if(this.value==''){jQuery(this).parent().parent().addClass('has-warning');}else{jQuery(this).parent().parent().removeClass('has-warning');getBucket();}">
          </div>
          <div class="col-sm-4"> <span  class="help-inline">阿里云云存储Access Key Secret</span> </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-3" ><a href="javascript:;" onclick="getBucket()">点此获取bucket列表</a></label>
          <div class="col-sm-5">
            <select id="bucket" name="bucket" class="form-control" onchange="setBucketHost()">
            </select>
          </div>
          <div class="col-sm-4"> <span  class="help-inline">选择要管理的bucket，点击左侧的连接可以自动获取bucket列表</span> </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-3" for="hostname">
          <div class="dropdown" > <a id="hostname_dropmenu" role="button" data-toggle="dropdown" href="#">选择节点地址 <span class="caret"></span></a>
            <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6" style="max-height:200px;overflow-y:auto;">
                           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-hangzhou.aliyuncs.com" onclick="selectHostName(this);return false;">杭州节点外网地址</a></li>
                           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-hangzhou-internal.aliyuncs.com" onclick="$('hostname').value=jQuery(this).attr('hostname');return false;">杭州节点内网地址</a></li>
                           <li role="presentation" class="divider"></li>
                           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-qingdao.aliyuncs.com" onclick="$('hostname').value=jQuery(this).attr('hostname');return false;">青岛节点外网地址</a></li>
                           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-qingdao-internal.aliyuncs.com" onclick="$('hostname').value=jQuery(this).attr('hostname');return false;">青岛节点内网地址</a></li>
                           <li role="presentation" class="divider"></li>
                           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-beijing.aliyuncs.com" onclick="$('hostname').value=jQuery(this).attr('hostname');return false;">北京节点外网地址</a></li>
                           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-beijing-internal.aliyuncs.com" onclick="$('hostname').value=jQuery(this).attr('hostname');return false;">北京节点内网地址</a></li>
                            <li role="presentation" class="divider"></li>
                           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-hongkong.aliyuncs.com" onclick="$('hostname').value=jQuery(this).attr('hostname');return false;">香港节点外网地址</a></li>
                           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-hongkong-internal.aliyuncs.com" onclick="$('hostname').value=jQuery(this).attr('hostname');return false;">香港节点内网地址</a></li>
                            <li role="presentation" class="divider"></li>
                           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-shenzhen.aliyuncs.com" onclick="$('hostname').value=jQuery(this).attr('hostname');return false;">深圳节点外网地址</a></li>
                           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-shenzhen-internal.aliyuncs.com" onclick="$('hostname').value=jQuery(this).attr('hostname');return false;">深圳节点内网地址</a></li>
                            <li role="presentation" class="divider"></li>
                           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-shanghai.aliyuncs.com" onclick="$('hostname').value=jQuery(this).attr('hostname');return false;">上海节点外网地址</a></li>
                           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-cn-shanghai-internal.aliyuncs.com" onclick="$('hostname').value=jQuery(this).attr('hostname');return false;">上海节点内网地址</a></li>
                           
                           <li role="presentation" class="divider"></li>
                           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-us-west-1.aliyuncs.com" onclick="$('hostname').value=jQuery(this).attr('hostname');return false;">美国硅谷外网地址</a></li>
                           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-us-west-1-internal.aliyuncs.com" onclick="$('hostname').value=jQuery(this).attr('hostname');return false;">美国硅谷内网地址</a></li>
                           <li role="presentation" class="divider"></li>
                           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-ap-southeast-1.aliyuncs.com" onclick="$('hostname').value=jQuery(this).attr('hostname');return false;">新加坡外网地址</a></li>
                           <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:;" hostname="oss-ap-southeast-1-internal.aliyuncs.com" onclick="$('hostname').value=jQuery(this).attr('hostname');return false;">新加坡内网地址</a></li>
                        </ul>
          </div>
          </label>
          <div class="col-sm-5">
            <input type="text" class="form-control" id="hostname" name="hostname" autocomplete="off" value="$ali[hostname]" onblur="if(this.value==''){jQuery(this).parent().parent().addClass('has-warning');}else{jQuery(this).parent().parent().removeClass('has-warning');}">
          </div>
          <div class="col-sm-4"> <span  class="help-inline">选择内网地址时，必须保证服务器和云存储bucket在同一节点内。</span> </div>
        </div>
        <div class="form-group">
          <div class="col-sm-3"></div>
          <div class="col-sm-9">
            <input type="submit" class="btn btn-primary" value="添加" >
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
</div>
<script type="text/javascript">
jQuery('.left-drager').leftDrager_layout();
function setBucketHost(){
	jQuery('#hostname').val('');
	jQuery("#bucket").parent().parent().removeClass('has-warning');
}
function selectHostName(obj){
	jQuery('#hostname').val(jQuery(obj).attr('hostname'));
	jQuery("#hostname").parent().parent().removeClass('has-warning');
	jQuery('#hostname_dropmenu').html(jQuery(obj).html()+'<span class="caret"></span>');
}
function getBucket(){
	var id=jQuery("#access_id").val();
	var key=jQuery("#access_key").val();
	if(id=='' || key==''){
		return ;
	}
	jQuery.getJSON('{BASESCRIPT}?mod=cloud&op=oauth&do=getBucket',{id:id,key:key},function(json){
		if(json.length>0){
			var html='';
			for(var i in json){
				html+='<option value="'+json[i]+'" >'+json[i]+'</option>';
			}
			jQuery('#bucket').html(html);
		}
	});
	
}
function validate(form){
	if(jQuery("#access_id").val()==''){
		jQuery("#access_id").parent().parent().addClass('has-warning');
		return false;
	}else if(jQuery("#access_key").val()==''){
		jQuery("#access_key").parent().parent().addClass('has-warning');
		return false;
	}else if(jQuery("#bucket").val()==''){
		jQuery("#bucket").parent().parent().addClass('has-warning');
		return false;
	}else if(jQuery("#hostname").val()==''){
		jQuery("#hostname").parent().parent().addClass('has-warning');
		return false;
	}
	return true;
}
</script> 
<script src="static/bootstrap/js/bootstrap.min.js?{VERHASH}"></script>
<!--{template common/footer_simple}--> 
